<template>
  <div>
    <!-- animated.css和transition 结合动画(部分手机不兼容,如：苹果13.2.2) -->
    <button @click="show = !show">Toggle render</button>
    <transition
      name="custom-classes-transition"
      enter-active-class="animated tada"
      leave-active-class="animated bounceOutRight"
    >
      <p v-if="show">hello</p>
    </transition>


    <!-- transition-group只能用于循环列表动画 -->
    <div>
      <label>
        Id:
        <input type="text" v-model="id" />
      </label>

      <label>
        Name:
        <input type="text" v-model="name" />
      </label>
      <input type="button" value="添加" @click="add" />
    </div>
    <div class="main" ref="main">
      <div ref="content">
        <transition-group appear tag="ul">
          <li v-for="(item,index) in list" :key="index">{{item.id}}---{{item.name}}</li>
        </transition-group>
      </div>
    </div>

    <Footer />
  </div>
</template>


<script>
export default {
  data() {
    return {
      show: false,

      id: '',
      name: '',
      list: [
        {
          id: 1,
          name: "赵高"
        },
        {
          id: 2,
          name: "秦桧"
        },
        {
          id: 3,
          name: "严嵩"
        },
        {
          id: 4,
          name: "魏忠贤"
        }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
     this.$refs.main.scrollTop = this.$refs.content.scrollHeight;
    })
  },
  methods: {
    add() {
      this.list.push({
        id: this.id,
        name: this.name
      });
      this.id = this.name = "";
    },
    del(i) {
      this.list.splice(i, 1);
    }
  }
};
</script>
<style lang='scss' scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.6s ease;
}
.main{
  height:80px;
  overflow: auto;
}
</style>